<%@ page language="java" isELIgnored="false"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />
<style type="text/css">
.innertube h2 {
	color: #FFFFFF;
}

.search .searchFormPanel_input_text {
	padding-bottom: 2px;
}
.search .searchFormPanel_input_text {padding-bottom: 2px;}

</style>
<link href="${pageContext.request.contextPath}/css/colorPicker.css"	rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/jquery-ui-1.8.16.custom.css"	rel="stylesheet" type="text/css" />
<script type="text/javascript"	src="${pageContext.request.contextPath}/scripts/jquery.colorPicker.js"></script>
<script type="text/javascript"	src="${pageContext.request.contextPath}/scripts/jquery.colorPicker.min.js"></script>



<script type="text/javascript">
	function addCategory(){
		var title = $('input[name=categoryName]').val();
		var description = document.getElementById("categoryDesct").value;
		
		if (title == ""){
			$('#feedbackPanel').fadeIn(500);
		}
		else{
			$.ajax({
	            url : '${pageContext.request.contextPath}/ajax/taskCategory/add',
	            type : "POST",
	            data: { title: title, description: description },
	            dataType : "html",
	            beforeSend : function() {
	            	$('#imgSpinnerContainer').show();
	            	//$('#categories').slideToggle(300);
	            },
	            complete : function() {
	            	$('#imgSpinnerContainer').hide();
	            	//$('#categories').show(500);
	            	
	            },
	            success : function(data) {
	            	$('#categories').html(data);
	            	
	            },
	            error : function() {
	               alert("Warning: the name of category can not same others" );
	            }
         });
			$('#feedbackPanel').fadeOut(500);
		}
	}
</script>

<div class="contentwrapper" style="width: 98%;">
	<div class="innertube">
		<h2 class="userDefinedBg">
			<span class="right_end"><span class="start">Edit
					Categories</span></span>
		</h2>
		<div class="contentBlock contentUser">
			<div style="width: 700px; background: #EDF3FE; padding: 5px; margin-left: 20px;">
				Changes to categories affect everyone's tasks in your account. For
				example, if you change "Email" to "Email them" users in your account
				will see tasks marked "Email" replaced with "Email them." Remember
				to ask your co-workers before you make any major changes.</div>
				<div id="feedbackd"></div>
			<div class="createCategory" style="margin-left: 20px; margin-bottom: 50px;">
				<!-- <div class="label">Select a colour</div>
				<script type="text/javascript">
					jQuery(document).ready(function($) {
					    $('#colour').colorPicker();
					  });
				</script>
				<input style="display: none;" value="#000000" name="colour"
					id="colour" type="text"> -->
				<!-- <div style="background-color: rgb(0, 0, 0);"
					class="color_picker">&nbsp;</div> -->
				<h3 style="margin-top: 40px; margin-left: 100px; letter-spacing: 0px;">Category list</h3>
				<div id="categories" style="margin-top: 20px;margin-bottom: 50px; margin-left: 100px;">
					<%@include file="controls/c_categories.jsp" %>				
				</div>
				<ul id="feedbackPanel" class="feedbackPanel" style="width: 700px; display: none;">
					<li class="feedbackPanelINFO">
						<span class="feedbackPanelINFO">Field 'Title' is a required field.</span>
					</li>
				</ul>
				<h3 style="color: gray;">Title</h3>
					<input style="padding-top: 4px; width: 690px;" name="categoryName" id ="categoryName"	type="text" autofocus="autofocus"> <br>
				<h3 style="color: gray;">Description</h3>
				<br>
				<textarea style="width: 690px; height: 200px;"	class="Text semiFull" name="categoryDesct" id="categoryDesct"></textarea>
				<div class="button">
					<!-- <script type="text/javascript">
						function a() {
							var temp = document.getElementById("colour").val();
							alert(temp);
						}
					</script> -->
					<a class="gcSubmit" id="addLinkd2" onclick="addCategory();"> Add category 
						<span class="left"></span> 
						<span class="right"></span>
						<span  id="spinnerContainer">&nbsp;<img id="imgSpinnerContainer" style="display: none;" src="${pageContext.request.contextPath}/images/loading.gif"></span>
					</a>
					<a href="javascript:history.go(-1)">Okay I'm done with editing the categories</a>
				</div>
			</div>
		</div>
		<div class="contentBlock_bottom">
			<span class="right_end"><span></span></span>
		</div>
	</div>
</div>